<template>
    <div class="bar" ref="bar"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, defineProps } from 'vue'
let props = defineProps({
    barOptions: {
        typeof: 'Object',
        default: () => { }
    }
})
let bar = ref(null)
const getBar = () => {
    // console.log(bar.value);
    let myChart = echarts.init(bar.value)
    let option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            min:0,
            max:20,
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }
        ]
    };
    props.barOptions ? myChart.setOption(props.barOptions) : myChart.setOption(option)
    window.addEventListener('resize', () => {
        let resizeTimer = null
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(() => {
            myChart.resize();
        }, 300);
    })
}
onMounted(() => {
    getBar()
})
</script>
<style scoped>
.bar {
    width: 3.5rem;
    height: 2rem;
    z-index: 10;
    position: relative;
}
</style>